<template>
	<div class="role">
		<div class="title">
			<div class="key">
				<div class="item">关键字：</div>
				<div class="item">
					<el-input v-model="keywords" clearable placeholder="请输入关键字" @change="search"></el-input>
				</div>
<!--				<div class="item">-->
<!--					<span>类型：</span>-->
<!--					<el-select v-model="status" clearable @change="search" placeholder="请选择厂商类型">-->
<!--						<el-option label="生态链" value="生态链"></el-option>-->
<!--						<el-option label="三方厂商" value="三方厂商"></el-option>-->
<!--					</el-select>-->
<!--				</div>-->
				<div class="item">
					<el-button type="primary" @click="search">查询</el-button>
				</div>
			</div>
			<div class="item" v-if="power.includes('manufactor_add')">
				<el-button type="primary" @click="addForm">新增</el-button>
			</div>
		</div>
		<div class="tab">
			<el-table
				v-if="initTableList"
				class="marT"
				:data="initTableList.slice((current-1)*size, current*size)"
				:border="true"
				:header-cell-style="{background:'#eef1f6'}">
				<el-table-column
					align="center"
					type="index"
					label="序号"
					width="50">
				</el-table-column>
				<el-table-column align="center" property="name" label="客户名称" ></el-table-column>
				<el-table-column align="center" property="contacts" label="联系人" ></el-table-column>
				<el-table-column align="center" property="phone" label="联系方式" >
					<template slot-scope="scope">
						<span>{{scope.row.phone || '暂无'}}</span>
					</template>
				</el-table-column>
				<el-table-column align="center" property="location" label="所在地" ></el-table-column>
<!--				<el-table-column align="center" property="type" label="类型" ></el-table-column>-->
				<el-table-column align="center" property="desc" label="描述">
					<template slot-scope="scope">
						<span>{{scope.row.desc || '暂无'}}</span>
					</template>
				</el-table-column>
				<el-table-column align="center" label="操作">
					<template slot-scope="scope">
						<span><a @click="toDetails(scope.row)">查看</a></span>
						<span><a > | </a></span>
						<span><a @click="toBianji(scope.row)" :disabled="!power.includes('manufactor_update')">编辑</a></span>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination
				background
				layout="prev, pager, next"
				:page-size="tableSize"
				@size-change="tableSizeChange"
				@current-change="tableCurrentChange"
				:current-page="tableCurrent"
				style="text-align: center;height: 100px;"
				:total="tableTotal">
			</el-pagination>
		</div>
		<addForm ref="addForm"></addForm>
	</div>
</template>

<script>
import { getHeader } from '@/app.config'
import {manufactor} from '@/api/user'
import addForm from "./model/addForm";
export default {
	name: 'factoryManagement',
	components:{
		addForm
	},
	data(){
		return {
			tableSize:10,
			tableCurrent:1,
			tableTotal:1,
			options:{},
			value: '',
			size: 10,
			current: 1,
			initTableList: [],
			keywords:'',
			status:'',
			power:[]
		}
	},
	created() {
		this.initTable()
	},
	methods:{
		search(){
			manufactor({
				keywords:this.keywords,
				type:this.status
			}).then(response => {
				this.initTableList = response.data.data
				this.tableTotal = response.data.totalCount
			})
		},
		tableSizeChange(val) {
			this.tableSize = val
		},
		tableCurrentChange(val) {
			this.tableCurrent = val
			manufactor({
				pageNo:this.tableCurrent,
				pageSize:this.tableSize
			}).then(response => {
				this.initTableList = response.data.data
				this.tableTotal = response.data.totalCount
			})
		},
		initTable(){
			manufactor().then(response => {
				this.power = sessionStorage.getItem('power').split(',')
				this.initTableList = response.data.data
				this.tableTotal = response.data.totalCount
			})
		},
		toDetails(data){
			this.$refs.addForm.dialogFormVisible = true
			this.$refs.addForm.initData(3,data)
		},
		toBianji(data){
			this.$refs.addForm.dialogFormVisible = true
			this.$refs.addForm.initData(2,data)
		},
		addForm(){
			this.$refs.addForm.dialogFormVisible = true
			this.$refs.addForm.initData(1)
		}
	}
}
</script>

<style lang="scss" scoped>
.role{
	padding: 0 10px;
	.tab{
		width: 100%;
		padding: 20px;
		background-color: #fff;
	}
	.title{
		width: 100%;
		padding: 20px;
		display: flex;
		background-color: #fff;
		justify-content: space-between;
		margin: 5px 0;
		.key{
			display: flex;
			.item:first-child{
				line-height: 36px;
			}
			.item:nth-child(3){
				margin: 0 5px;
			}
		}
	}
}
</style>
